import { defineComponent, ExtractPropTypes, renderSlot } from 'vue'
import { Button } from 'ant-design-vue'
import Icon from '../../Icon'

const buttonProps = {
  success: {
    type: Boolean
  },
  warning: {
    type: Boolean
  },
  info: {
    type: Boolean
  },
  icon: {
    type: String
  }
} as const

export type ButtonProps = Partial<ExtractPropTypes<typeof buttonProps>>

export default defineComponent({
  name: 'SpsButton',
  props: buttonProps,
  setup(props, { attrs, slots }) {
    /* render 函数 */
    return () => {
      const { attrClass, ...otherAttrs } = attrs
      return (
        <Button
          {...otherAttrs}
          class={[
            {
              'sps-btn': true,
              'sps-btn-success': props.success,
              'sps-btn-warning': props.warning,
              'sps-btn-info': props.info
            },
            attrClass
          ]}
          v-slots={{
            ...slots,
            icon() {
              if (slots.icon) {
                return renderSlot(slots, 'icon')
              }
              if (props.icon) {
                return <Icon name={props.icon} />
              }
              return null
            }
          }}
        />
      )
    }
  }
})
